<template>
  <div class="maincontent designOpinion">
    <div class="contentbox">
      <div class="printImg" v-if="file">
        <!-- <img src="@/assets/third/print.png" alt /> -->
        <!-- <p class="arrow">
          <span @click="changePdfPage(0)" class="turn" :class="{grey: currentPage==1}">上一页</span>
          <span class="pages">{{currentPage}} / {{pageCount}}</span>
          <span @click="changePdfPage(1)" class="turn" :class="{grey: currentPage==pageCount}">下一页</span>
        </p>-->
        <iframe class="pdfBox" :src="pdfUrl"></iframe>
      </div>
      <!-- <div class="addadvice">
        <div class="header">
          <div class="title">{{attachName}}</div>
          <div class="export" v-if="!isCurrentProcess">
            <el-button class="add" type="primary" size="small" @click="addadvice">新增</el-button>
          </div>
        </div>
        <div v-if="!showadd" class="opinionList">
          <div class="touchBtn">
            <span :class="{'active' : showFS}" @click="handleChangeView(0)">复审意见</span>
            <span :class="{'active' : !showFS}" @click="handleChangeView(1)">初审意见</span>
          </div>
          <template v-if="showFS">
          <div class="menulist" v-if="!isCurrentProcess">
            <el-switch style="margin-top: 10px;" v-model="moreChange" inactive-text="批量修改"></el-switch>
            <div style="margin: 20px 30px;" v-show="moreChange">
              <el-radio-group style="margin-right: 20px;" v-model="changeType.status">
                <el-radio :label="3">已修改</el-radio>
                <el-radio :label="2">未修改</el-radio>
              </el-radio-group>
              <el-button type="primary" size="small" @click="changeAdvice">确定</el-button>
              <el-button size="small" @click="moreChange = false">取消</el-button>
            </div>
            <div style="clear:both;"></div>
          </div>
          <div class="advicelist">
            <div class="item" v-for="(item, index) in adviceList" :key="index">
              <div class="situation">
                <div class="msg" style="margin-top:0;">附件名称：{{item.drawingType | handleSuffix}}</div>
                <div class="msg">问题描述：{{item.content}}</div>
                <div class="msg">问题类型：{{contentTypeList[item.contentType-1]}}</div>
                <div class="msg">修改情况：{{item.status | statusType}}</div>
                <div class="msg">审查时间：{{item.updateTime || item.createTime}}</div>
              </div>
              <div class="other" v-if="!isCurrentProcess">
                <div style="display: flex; align-items: center;">
                  <el-button type="text" @click="changeOne(item.id)">修改情况</el-button>
                  <div class="delete" @click="deleteOne(item.id)">删除</div>
                </div>
              </div>
            </div>
          </div>
          </template>
          <template v-if="!showFS">
            <div class="menulist">

            </div>
            <div class="advicelist">
              <div class="item" v-for="(item, index) in csAdviceList" :key="index">
                <div class="situation">
                  <div class="msg" style="margin-top:0;">附件名称：{{item.drawingType | handleSuffix}}</div>
                  <div class="msg">问题描述：{{item.content}}</div>
                  <div class="msg">问题类型：{{contentTypeList[item.contentType-1]}}</div>
                  <div class="msg">修改情况：{{item.status | statusType}}</div>
                  <div class="msg">审查时间：{{item.updateTime || item.createTime}}</div>
                </div>
                <div class="other">
                  <div style="display: flex; align-items: center;">
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>
        <el-form v-if="showadd" :model="form" label-width="80px" style="margin-top:30px;">
          <el-form-item label="附件名称" prop="drawingFileId">
            <el-select placeholder="请选择" v-model="form.drawingFileId">
              <el-option
                :label="file.fileName | handleSuffix"
                :value="file.fileId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="意见类型" prop="contentType">
            <el-select placeholder="请选择" v-model="form.contentType">
              <el-option :key="item"
                v-for="(item, index) in contentTypeList"
                :label="item"
                :value="index+1"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="问题描述">
            <el-input type="textarea" v-model="form.content" rows="4"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
            <el-button @click="showadd=false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>-->
    </div>
    <!-- 修改情况弹窗 -->
    <el-dialog :close-on-click-modal="false" title="修改情况" :visible.sync="dialogVisible" width="30%">
      <div class="content">
        <el-radio-group style="margin-right: 20px;" v-model="changeTypeOne.status">
          <el-radio :label="3">已修改</el-radio>
          <el-radio :label="2">未修改</el-radio>
        </el-radio-group>
      </div>
      <!-- @click="changeAdviceOne" -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import pdf from "vue-pdf";
import config from "@/config/index.js";
import {
  getExport,
  changeAdviceOne,
  deleteAdviceOne,
  addAdvice,
  changeAdvice,
  getAdviceList
} from "@/api/plannDesignBudget/designOpinions";
import { getFile } from "@/api/common";
export default {
  components: { pdf },
  data() {
    return {
      pdfUrl: "",
      contentTypeList: ["一般错误", "严重错误", "疑问片块", "无错误"],
      form: {
        content: "",
        linkName: this.linkName ? this.linkName : "",
        drawingFileId: "",
        drawingType: "",
        contentType: 1,
        status: 1
      },
      showFS: true,
      showadd: false,
      moreChange: false,
      currentPage: 1,
      pageCount: 1,
      pdfNum: 0,
      pdfList: [],
      dialogVisible: false,
      changeTypeOne: {
        status: 3,
        id: ""
      },
      changeType: {
        status: 3,
        idStr: ""
      },
      adviceList: [],
      csAdviceList: []
    };
  },
  props: {
    file: {
      type: Object,
      require: true
    },
    linkName: {
      type: String,
      require: true
    },
    projectId: {
      type: Number,
      require: true
    },
    firstLinkName: {
      type: String,
      require: true
    }
  },
  created() {
    // this.getPDF();
  },
  computed: {
    attachName() {
      return this.showadd ? "审查意见录入" : "审查意见";
    },
    isCurrentProcess: function() {
      let isTrue =
        localStorage.getItem("key") ==
        "PLANNING_DESIGN_AND_BUDGETING_CITY_CENTER_EXAMINE";
      if (localStorage.getItem("lookStatus") == 2) {
        isTrue = false;
      }
      return !isTrue;
    }
  },
  methods: {
    onSubmit() {
      //提交新增审查意见
      let loadingInstance = this.$loading(this.$loadingData);
      addAdvice(this.form)
        .then(res => {
          loadingInstance.close();
          this.$message({
            message: "提交成功！",
            type: "success"
          });
          this.showadd = false;
          this.getAdviceList();
        })
        .catch(res => {
          loadingInstance.close();
        });
    },
    // addadvice() {
    //     //打开新增审查意见表单
    //     this.form = {
    //         content: "",
    //         projectId: this.projectId,
    //         linkName: this.linkName,
    //         drawingFileId: this.file.fileId,
    //         drawingType: this.file.fileType,
    //         contentType: 1,
    //         status: 1
    //     };
    //     this.showadd = true;
    // },
    // changeAdvice() {
    //     //批量修改情况
    //     if (this.adviceList.length > 0) {
    //         const loading = this.$loading({
    //             lock: true,
    //             text: "Loading",
    //             spinner: "el-icon-loading",
    //             background: "rgba(0, 0, 0, 0.7)"
    //         });
    //         let list = [];
    //         this.adviceList.forEach(a => {
    //             list.push(a.id);
    //         });
    //         this.changeType.idStr = list.join(",");
    //         changeAdvice(this.changeType)
    //             .then(res => {
    //                 loadingInstance.close();
    //                 this.$message({
    //                     message: "提交成功！",
    //                     type: "success"
    //                 });
    //                 this.getAdviceList();
    //             })
    //             .catch(res => {
    //                 loadingInstance.close();
    //             });
    //     }
    // },
    // handleChangeView (flag) {
    //     switch (flag) {
    //         case 0:
    //             this.showFS = true
    //             break
    //         case 1:
    //             this.showFS = false
    //             break
    //         default:

    //     }

    // },
    //获取pdf路径
    _initData() {
      //获取pdf
      console.log(this.file, "sssssssssssssssssss");
      // this.file['url'] = this.$https+`/pc/file/download?id=${this.file.fileId}`;
      // this.file['url'] = this.$https+`/pc/file/download?id=${this.file.fileId}`;
      // this.getAdviceList();
      var id = this.file.fileId;
      var data = {
        fileId: id
      };
      getFile(data).then(res => {
        this.pdfUrl =
          this.$httpsCad + "/?url=" + this.$https + res.data.filePath;
      });

      console.log(this.file);
    },
    changePdfPage(val) {
      // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
      if (val === 0 && this.currentPage > 1) {
        this.currentPage--;
      }
      if (val === 1 && this.currentPage < this.pageCount) {
        this.currentPage++;
      }
    },
    loadPdfHandler(e) {
      // pdf加载时
      this.currentPage = 1; // 加载的时候先加载第一页
    },
    // changePdfNum(num) {
    //     //切换pdf
    //     this.pdfNum = num;
    //     this.currentPage = 1;
    //     this.pageCount = 1;
    //     this.getAdviceList();
    // },
    getExport() {
      //导出审查意见
      getExport({
        linkName: this.linkName,
        projectId: this.projectId
      }).then(res => {
        this.fileDownload(res, "审查意见.xlsx");
      });
    },
    fileDownload(data, fileName) {
      // 创建隐藏的可下载链接
      var eleLink = document.createElement("a");
      eleLink.download = fileName; // 必须携带格式的名称  比如  app.text 或者 index.html
      eleLink.style.display = "none";
      // 字符内容转变成blob地址
      var blob = new Blob([data]);
      eleLink.href = URL.createObjectURL(blob);
      // 触发点击
      document.body.appendChild(eleLink);
      eleLink.click();
      // 然后移除
      document.body.removeChild(eleLink);
    }
    // getAdviceList() {
    //     //获取意见列表
    //     const loading = this.$loading({
    //         lock: true,
    //         text: "Loading",
    //         spinner: "el-icon-loading",
    //         background: "rgba(0, 0, 0, 0.7)"
    //     });
    //     getAdviceList({
    //         drawingType: this.file.fileType,
    //         linkName: this.linkName,
    //         projectId: this.projectId
    //     })
    //         .then(res => {
    //             this.adviceList = res.data;
    //         })
    //         .catch(res => {
    //         });
    //     // 获取初审意见列表
    //     getAdviceList({
    //         drawingType: this.file.fileType,
    //         linkName: this.firstLinkName,
    //         projectId: this.projectId
    //     })
    //         .then(res => {
    //             this.csAdviceList = res.data;
    //             loadingInstance.close();
    //         })
    //         .catch(res => {
    //             loadingInstance.close();
    //         });
    // },
    // changeOne(id) {
    //     //单个修改情况
    //     this.changeTypeOne.id = id;
    //     this.dialogVisible = true;
    // },
    // changeAdviceOne() {
    //     //修改情况（单个）
    //     const loading = this.$loading({
    //         lock: true,
    //         text: "Loading",
    //         spinner: "el-icon-loading",
    //         background: "rgba(0, 0, 0, 0.7)"
    //     });
    //     changeAdviceOne(this.changeTypeOne)
    //         .then(res => {
    //             loadingInstance.close();
    //             this.$message({
    //                 message: "提交成功！",
    //                 type: "success"
    //             });
    //             this.dialogVisible = false;
    //             this.getAdviceList();
    //         })
    //         .catch(res => {
    //             loadingInstance.close();
    //         });
    // },
    // deleteOne(id) {
    //     //删除审查意见
    //     this.$confirm('确认删除此条审查意见?', '提示', {
    //         confirmButtonText: '确定',
    //         cancelButtonText: '取消',
    //         type: 'warning'
    //     }).then(() => {
    //         const loading = this.$loading({
    //             lock: true,
    //             text: "Loading",
    //             spinner: "el-icon-loading",
    //             background: "rgba(0, 0, 0, 0.7)"
    //         });
    //         deleteAdviceOne({ id: id })
    //             .then(res => {
    //                 loadingInstance.close();
    //                 this.$message({
    //                     message: "删除成功！",
    //                     type: "success"
    //                 });
    //                 this.getAdviceList();
    //             })
    //             .catch(res => {
    //                 loadingInstance.close();
    //             })
    //     }).catch(err => {})

    // }
  },
  filters: {
    handleSuffix(fileName) {
      if (!fileName) return "";
      return fileName.indexOf(".") !== -1 ? fileName.split(".")[0] : fileName;
    },
    statusType(data) {
      //修改情况
      switch (data) {
        case 1:
          return "未修改";
          break;
        case 2:
          return "修改不通过";
          break;
        case 3:
          return "修改通过";
          break;
      }
    }
  },
  watch: {
    file(newVal) {
      // 监听新文件对象不为空从新获取文件
      if (newVal) {
        this._initData();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.designOpinion {
  height: 100%;
  background: #ffffff;
  overflow: hidden;
  .contentbox {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    height: 100%;
    overflow: hidden;
    -webkit-box-align: center;
    // -webkit-align-items: center;
    // align-items: center;
    .printImg {
      width: 100%;
      overflow: hidden;
      img {
        width: 100%;
        display: block;
      }
      .arrow {
        text-align: center;
        .turn {
          cursor: pointer;
        }
        .pages {
          margin: 0 20px;
        }
      }
      .pdfBox {
        width: 100%;
        height: calc(100vh - 250px);
      }
    }
    .addadvice {
      width: 40%;
      margin-left: 2%;
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      flex: 1;
      .touchBtn {
        margin-top: 20px;
        span {
          display: inline-block;
          width: 88px;
          height: 36px;
          font-size: 14px;
          line-height: 36px;
          color: #999999;
          text-align: center;
          cursor: pointer;
          &.active {
            color: #1d88f3;
            background: #eef3f8;
          }
        }
      }
      .header {
        margin-top: 24px;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        padding: 30px 30px 20px;
        border-bottom: 1px solid #e4e4e4;
        .title {
          -webkit-box-flex: 1;
          -webkit-flex: 1;
          flex: 1;
          font-size: 18px;
          font-family: PingFang SC;
          font-weight: bold;
          line-height: 25px;
          color: #4d4d4d;
        }
        .export {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          line-height: 20px;
          color: #737373;
          img {
            width: 12px;
            margin-right: 3px;
          }
        }
      }
      .opinionList {
        height: calc(100% - 107px);
        overflow: hidden;
      }
      .menulist {
        margin-top: 20px;
        .item {
          width: 116px;
          height: 36px;
          background: #ffffff;
          line-height: 36px;
          text-align: center;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #999999;
          margin-right: 24px;
          float: left;
          cursor: pointer;
          &.active {
            background: #eef3f8;
            color: #1d88f3;
          }
        }
        .add {
          float: right;
          width: 60px;
          height: 28px;
          background: rgba(64, 158, 255, 1);
          border-radius: 2px;
          text-align: center;
          line-height: 28px;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #ffffff;
          margin-top: 4px;
          cursor: pointer;
          margin-right: 30px;
        }
      }
      .advicelist {
        margin-top: 10px;
        height: calc(100% - 50px);
        overflow: auto;
        .item {
          padding: 20px 30px;
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          -webkit-box-align: center;
          border-bottom: 1px solid #e4e4e4;
          .situation {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            .msg {
              margin-top: 10px;
              font-size: 14px;
              font-family: PingFang SC;
              font-weight: 500;
              line-height: 20px;
              color: #8c8c8c;
            }
          }
          .other {
            text-align: right;
            .date {
              height: 18px;
              font-size: 13px;
              font-family: PingFang SC;
              font-weight: 500;
              line-height: 18px;
              color: #999999;
            }
            .delete {
              font-size: 14px;
              font-family: PingFang SC;
              font-weight: 500;
              line-height: 20px;
              //   margin-top: 12px;
              color: #f92828;
              margin-left: 20px;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>
